<template>
    <div>
        <flexbox align="flex-start" wrap="wrap">
            <flexbox class="cell-item" v-for="item of fieldList.slice(0, showFieldMaxNum - 1)" :key="item.field">
                <!-- allowClear -->
                <h-search-select-cell
                    :default-value="$filters.valToNameFilter('fromSystem', form[item.field])"
                    type="platformSystem"
                    :searchQuery="{ isOutsideSystem: '1' }"
                    label="systemName"
                    @success="handleSelectChange"
                    ref="searchSelectRef"
                    style="min-width: 160px"
                    v-if="item.formType === 'select'"
                />
                <h-search-select-cell
                    allowClear
                    placeholder="请输入版本号"
                    v-model:value="form.name"
                    type="jiraVersion"
                    :searchQuery="{ systemId: form.systemId, field: 'fixVersion' }"
                    style="min-width: 160px"
                    v-if="item.formType === 'selectVersion'"
                />
                <h-search-select-cell
                    allowClear
                    placeholder="请输入sprint"
                    v-model:value="form.sprint"
                    type="sprint"
                    :searchQuery="{ systemId: form.systemId, field: 'sprint' }"
                    style="min-width: 160px"
                    v-if="item.formType === 'selectSprint'"
                />
                <a-select
                    placeholder="请选择状态"
                    allowClear
                    v-model:value="form[item.field]"
                    style="min-width: 160px"
                    v-if="item.formType === 'commonSelect'"
                >
                    <a-select-option v-for="item of item.defaultOptions" :key="item.dimensionName" :value="item.code">
                        {{ item.dimensionName }}
                    </a-select-option>
                </a-select>

                <a-input
                    class="cell-item"
                    allowClear
                    :placeholder="item.placeholder"
                    v-model:value="form[item.field]"
                    v-if="item.formType === 'input'"
                />
                <flexbox v-if="item.formType === 'date'">
                    <div style="margin-right: 12px">{{ item.title }}：</div>
                    <h-range-picker-cell
                        :value="[
                            form[item.startTimeField] ? $moment(form[item.startTimeField], 'YYYY-MM-DD') : null,
                            form[item.endTimeField] ? $moment(form[item.endTimeField], 'YYYY-MM-DD') : null,
                        ]"
                        @change="rangeDateChange($event, item.field)"
                    />
                </flexbox>
            </flexbox>
            <a-button type="primary" class="margin-r-8" @click="handleSearch">搜索</a-button>
            <a-button @click="handleReset">重置</a-button>
        </flexbox>
    </div>
</template>

<script lang="ts">
import { HRangePickerCell, HSearchSelectCell, HCustomSelect, HDicSelect, HShowMoreSelect, HGroupSelect } from '@/components';
import api from '@/api';
import store from '@/store';
import { useRoute } from 'vue-router';
import { defineComponent, ref, unref, computed, watch } from 'vue';
export default defineComponent({
    components: {
        HRangePickerCell,
        HSearchSelectCell,
        HCustomSelect,
        HDicSelect,
        HShowMoreSelect,
        HGroupSelect
    },
    emits: ['search'],
    props: {
        type: {
            type: String,
            default: ''
        }
    },
    setup(props, { emit }) {
        const route = useRoute();
        const form: any = ref({
            onlineTimeStart: null,
            onlineTimeEnd: null,
            releaseDateStart: null,
            releaseDateEnd: null,
            status: null,
            released: null,
            systemId: null,
            name: null,
            sprint: null
        });
        const defaultStatusOptions = ref<any>([]);
        const fieldList = computed(() => {
            if (props.type === '0') {
                return [
                    { field: 'systemId', title: '所属产品', placeholder: '所属产品', formType: 'select', width: '160px' },
                    { field: 'status', title: '状态', formType: 'commonSelect', defaultOptions: defaultStatusOptions.value },
                    { field: 'sprint', title: '选择sprint', placeholder: '选择sprint', formType: 'selectSprint', width: '160px' },
                    { field: 'onlineTime', startTimeField: 'onlineTimeStart', endTimeField: 'onlineTimeEnd', title: '上线时间', formType: 'date' }
                ];
            } else {
                return [
                    { field: 'systemId', title: '所属产品', placeholder: '所属产品', formType: 'select', width: '160px' },
                    {
                        field: 'released',
                        title: '状态',
                        formType: 'commonSelect',
                        defaultOptions: [
                            { dimensionName: '已发布', code: true },
                            { dimensionName: '未发布', code: false }
                        ]
                    },
                    { field: 'systemId', title: '选择版本', placeholder: '选择版本', formType: 'selectVersion', width: '160px' },
                    { field: 'releaseDate', startTimeField: 'releaseDateStart', endTimeField: 'releaseDateEnd', title: '上线时间', formType: 'date' }
                ];
            }
        });
        const queryForm = computed(() => {
            const { releaseDateStart, releaseDateEnd, onlineTimeStart, onlineTimeEnd, status, released, systemId, name, sprint } = form.value;
            if (props.type === '0') {
                return {
                    onlineTimeStart,
                    onlineTimeEnd,
                    status,
                    systemId,
                    name,
                    sprint
                };
            } else {
                return {
                    releaseDateStart,
                    releaseDateEnd,
                    released,
                    systemId,
                    name
                };
            }
        });
        const showFieldMaxNum = ref<number>(5);
        // 重置搜索条件
        const handleReset = () => {
            const systemId = form.value.systemId;
            form.value = {
                onlineTimeStart: null,
                onlineTimeEnd: null,
                releaseDateStart: null,
                releaseDateEnd: null,
                status: null,
                released: null,
                systemId,
                name: null,
                sprint: null
            };
        };
        const handleSearch = () => {
            if (props.type === '0') {
                emit('search', {
                    ...unref(queryForm)
                });
            } else {
                emit('search', {
                    ...unref(queryForm)
                });
            }
        };
        const handleSelectChange = (val) => {
            if (val) {
                form.value.systemId = val.id;
                getStatusOptions(val.id);
            } else {
                form.value.systemId = null;
                defaultStatusOptions.value = [];
            }
        };
        const rangeDateChange = (val, field) => {
            const { startTime, endTime } = val;
            form.value[`${field}Start`] = startTime;
            form.value[`${field}End`] = endTime;
        };
        const init = async () => {
            const target = store.getters.dicOptions.fromSystem.find((item) => item.isOutsideSystem === '1');
            if (route.query.systemId) {
                form.value.systemId = route.query.systemId;
            } else {
                if (target) {
                    form.value.systemId = target.id;
                }
            }
            getStatusOptions(target.id);
        };

        const getStatusOptions = async (systemId) => {
            const query = {
                systemId,
                field: 'status'
            };
            const { success, moule } = await api.jiraIssueTrackModel.getFieldValueFromData(query);
            if (success) {
                defaultStatusOptions.value = moule.map((item) => ({
                    dimensionName: item,
                    code: item
                }));
            }
        };
        init();
        watch(
            form,
            () => {
                handleSearch();
            },
            { deep: true, immediate: true }
        );
        return {
            form,
            queryForm,
            fieldList,
            showFieldMaxNum,
            handleSearch,
            handleReset,
            rangeDateChange,
            handleSelectChange
        };
    }
});
</script>
<style scoped lang="less">
.cell-item {
    font-size: 14px;
    cursor: pointer;
    color: #344563;
    margin-right: 8px;
}
</style>